<template>
    <div class="action-box">
        <Button @click="trigger(action)" :class="{'action-storage':actionStorage && actionStorage[action.code]}" type="ghost" :icon="action.icon" v-show="action.locate!=='inline'" :key="action.code" v-for="action in actions">
            {{action.name}}
            <Icon class="icon-storage" v-if="actionStorage && actionStorage[action.code]" type="compose"></Icon>
        </Button>
    </div>
</template>
<script>
export default {
  props: {
    actions: {},
    actionStorage: {}
  },
  methods: {
    trigger(action) {
      this.$emit("triggerAction", action);
    }
  }
};
</script>

<style>
.icon-storage {
  margin-left: 4px;
  color: #57a3f3;
}
.action-storage {
  border-color: #57a3f3;
}
</style>
